.self-checking-container {
    width: 100%;
    min-height:100%; 
    padding: 0.32rem 0.32rem 0.95rem 0.32rem;
    box-sizing: border-box;
    background: url(../img/bg.png) no-repeat 0 0;
    background-size: cover;}
    .self-checking-container .self-checking-head {
        font-size: 0.36rem;
        font-weight:400;
        height: 0.8rem;
        line-height: 0.8rem;
        color:rgba(255,255,255,1);
        position: relative; }
        .self-checking-container .self-checking-pre {
            width: 0.3rem;
            height: 0.3rem;
            position: absolute;
            top: 50%;
            left: 4px;
            z-index: 99;
            color: rgba(0, 0, 0, 0);
            border-top: 1px solid #fff;
            border-left: 1px solid #fff;
            transform: translateY(-50%) rotate(-45deg);}
        .self-checking-container .self-checking-head .self-checking-num {
            position: relative;
            text-align: right; }
    .self-checking-container .self-checking-title {
        text-align: center;
        padding: 0.04rem 0.2rem;
        font-size: 0.36rem;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .self-checking-container .self-checking-main {
        min-height: 100%;
        padding-bottom: 1.28rem; }
        .self-checking-container .self-checking-main .self-checking-keywory {
            height: 1.2rem;
            margin-top: 0.3rem;
            background:rgba(255,255,255,1);
            border-radius: 0.1rem;
            font-size: 0.36rem;
            font-weight:400;
            color:rgba(72,72,72,1);
            line-height: 1.2rem;
            position: relative;
            left: 0;
            text-indent: 0.2rem; }
            .self-checking-container .self-checking-keywory .icon-right {
                position: absolute;
                right: -0.72rem;
                top: 50%;
                transform: translateY(-50%);
                width: 0.5rem;
                height: 0.5rem;
                line-height: 0.6rem;
                text-align: center;
                text-indent: 0px;
                background: #5B9F10;
                color: #fff;
                font-size: 0.32rem;
                border-radius: 50%;
                display: none;
            }   
        .self-checking-container .self-checking-main .active {
            background: #5B9F10;
            color: #FFFFFF; 
            animation: start 0.5s ease-in-out forwards}
        .self-checking-container .self-checking-main .end {
            animation: end 0.5s ease-in-out forwards
        }
    .self-checking-bottom {
        margin:-1.9rem auto 0 auto;
        width: 100%;
        padding: 0 0.3rem;
        text-align: center; }
        .self-checking-bottom .self-bottom-con {
            font-size: 0.32rem;
            font-weight:400;
            margin-bottom: 0.3rem;
            color:rgba(255,255,255,1);
            line-height: 0.4rem; }
            .self-checking-bottom .self-checking-button {
                display: flex;
                justify-content: space-between}
                .self-checking-bottom .self-checking-button .btn-item {
                    width: 40%;
                    height: 0.96rem;
                    line-height: 0.96rem;
                    color: #fff;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    font-size: 0.36rem; }

    .self-checking-pop {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0; 
        /* display: flex; */
        display: none;
        align-items: center; }
        .self-checking-pop .pop-con {
            width: 100%;
            margin: 0 0.4rem;
            position: relative;
            background: #fff;
            box-shadow:0px 0px 30px 0px rgba(0,0,0,0.3);
            border-radius:6px; }
            .self-checking-pop .pop-con .pop-title-icon {
                width: 1.28rem;
                height: 1.28rem;
                position: absolute;
                top: -0.64rem;
                left: 50%;
                transform: translateX(-50%);
                background: url(../img/ok1@3x.png) no-repeat 0 0;
                background-size: 100% 100%; }
            .self-checking-pop .pop-con .pop-con-text {
                font-size: 0.36rem;
                font-weight:500;
                text-align: center;
                margin: 1.04rem 0 0.4rem;
                color:rgba(51,51,51,1);
                line-height: 0.32rem; }
            .self-checking-pop .pop-con .pop-con-score {
                font-size: 1rem;
                font-weight:600;
                text-align: center;
                color:rgba(51,51,51,1);
                line-height: 1rem; }
            .self-checking-pop .pop-con .pop-btn {
                height: 1.12rem; 
                margin-top: 0.4rem;
                border-top: 1px solid #ccc;}
                .self-checking-pop .pop-btn .pop-btn-item {
                    float: left;
                    width: 50%;
                    height: 1.12rem;
                    line-height: 1.12rem;
                    font-size: 0.36rem;
                    text-align: center; }
                .pop-btn-again {
                    border-left: 1px solid #ccc;
                }
    .init {
        animation: init 0.5s ease-in-out forwards
    }

    @keyframes start {
        0%  {
            left: 0;
        }
        100% {
            left: -0.7rem;
        }
    }
    @keyframes end {
        0%  {
            left: -0.7rem;
        }
        100% {
            left: 0;
        }
    }

    @keyframes init {
        0% {
            left: 100%;
        }
        100% {
            left: 0%;
        }
    }

    .clearfix::after {
        display: block;
        content: ".";
        height: 0;
        clear: both;
        visibility: hidden;
    }